<script setup lang="ts">
import { transfromToComponentProps, textDefaultProps, textStylePropNames } from '../../defaultProps'
import { useComponentCommon } from '../../hooks/useComponentCommon'

const props = defineProps({
  tag: {
    type: String,
    default: 'div'
  },
  ...transfromToComponentProps(textDefaultProps)
})

const { styleProps, handleClick } = useComponentCommon(props, textStylePropNames)
</script>

<template>
  <component class="l-text-component" :is="props.tag" :style="styleProps" @click="handleClick"
    >{{ props.text }}
  </component>
</template>

<style scoped lang="scss">
.l-text-component {
  position: relative !important;
}
</style>
